$(function () {
    // 需求1: 用户退出
    let layer = layui.layer;
    $("#logout").on('click', function () {
        // 提示框 - layui官网 - 内置模块 - 弹出层 - 去复制代码！！！
        layer.confirm('确认退出登录吗？', { icon: 3, title: '提示' }, function (index) {
            // 跳转页面到登录页，清除token
            location.href = '/login.html';
            localStorage.removeItem("token");
            layer.close(index);
        });
    })

    // 需求2: 渲染用户名和头像;
    // 不要把getUserInfo()写到退出登录的逻辑中！
    getUserInfo();

});

// 获取用户信息，渲染用户名和头像功能封装
//   封装写到入口函数的外面！！！
//   我要这个函数是全局函数，后面的修改用户信息和头像成功后，要重新调用这个方法！
function getUserInfo() {
    axios({
        method: 'GET',
        url: '/my/userinfo',
        // headers: {
        //     Authorization: localStorage.getItem('token')
        // }
    }).then((res) => {
        // console.log(res.data);
        // 判断
        if (res.data.status !== 0) {
            return layui.layer.msg(res.data.message);
        }
        // 渲染用户名和头像
        renderUserInfo(res.data.data);
    })
}

function renderUserInfo(user) {
    // console.log(user);
    // 欢迎 名称有要求: 优先赋值昵称，不存在才赋值登录名称
    let name = user.nickname || user.username;
    // 欢迎赋值
    $(".welcome").html("欢迎&nbsp;&nbsp;" + name);
    
    // 判断有没有图片头像
    if (user.user_pic == null) {
        // 没有图片头像: 显示文字头像，隐藏图片头像！
        $(".avatar-text").show().html(name[0].toUpperCase());
        $(".avatar-img").hide();
    }else{
        // 有图片头像: 隐藏文字头像，显示图片头像！
        $(".avatar-text").hide();
        // attr操作自定义属性;  prop操作表单属性;
        $(".avatar-img").show().attr('src', user.user_pic);
    }
}